<template>
  <div class="line-chart">
    <div ref="chartRef" style="width: 795px; height: 300px;" class="left-line"></div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
// 引入 echarts
import * as echarts from 'echarts';
// 引入API
import { getLineChartData } from '@/api/dashboard';
const chartRef = ref(null);
let myChart = null;

onMounted(() => {
  // 初始化图表
  initChart();
});

const initChart = async () => {
  // 获取 DOM 容器
  const chartDom = chartRef.value;
  // 初始化 ECharts 实例
  myChart = echarts.init(chartDom);

  // 从后端获取数据
  try {
    const response = await getLineChartData();
    if (response.code === 200) {
      const { labels, data } = response.data;

      // 定义图表的配置项
      const option = {
        // 标题配置
        // title: {
        //   text: '示例折线图（带面积）',
        // },
        // 提示框配置，鼠标悬浮时显示数据
        tooltip: {
          trigger: 'axis',
        },
        // 图例配置
        legend: {
          data: ['数据'],
        },
        // x 轴配置
        xAxis: {
          type: 'category',
          // x 轴的类目数据
          data: labels,
        },
        // y 轴配置
        yAxis: {
          type: 'value',
        },
        // 系列（图表中的数据系列）配置
        series: [
          {
            name: '数据',
            type: 'line', // 折线图类型
            // 折线图的数据
            data: data,
            // 标记点配置，显示最大值等
            // markPoint: {
            //   data: [
            //     { type: 'max', name: '最大值' },
            //     { type: 'min', name: '最小值' },
            //   ],
            // },
            // 标记线配置
            // markLine: {
            //   data: [{ type: 'average', name: '平均值' }],
            // },
            // 新增：设置面积样式
            areaStyle: {
              color: 'rgba(17, 115, 239, 0.1)', // 面积填充颜色及透明度
            },
            // 可以调整折线的颜色等，与面积颜色搭配
            itemStyle: {
              color: 'rgb(75, 140, 245)',
            },
          },
        ],
      };

      // 使用配置项显示图表
      myChart.setOption(option);
    }
  } catch (error) {
    console.error('获取折线图数据失败:', error);

    // 如果获取数据失败，显示空图表
    const option = {
      // 标题配置
      // title: {
      //   text: '示例折线图',
      // },
      // 提示框配置，鼠标悬浮时显示数据
      tooltip: {
        trigger: 'axis',
      },
      // 图例配置
      legend: {
        data: ['数据'],
      },
      // x 轴配置
      xAxis: {
        type: 'category',
        // x 轴的类目数据
        data: [],
      },
      // y 轴配置
      yAxis: {
        type: 'value',
      },
      // 系列（图表中的数据系列）配置
      series: [
        {
          name: '数据',
          type: 'line', // 折线图类型
          // 折线图的数据
          data: [],
          // 标记点配置，显示最大值等
          // markPoint: {
          //   data: [
          //     { type: 'max', name: '最大值' },
          //     { type: 'min', name: '最小值' },
          //   ],
          // },
          // 标记线配置
          // markLine: {
          //   data: [{ type: 'average', name: '平均值' }],
          // },
          // 新增：设置面积样式
          areaStyle: {
            color: 'rgba(17, 115, 239, 0.1)', // 面积填充颜色及透明度
          },
          // 可以调整折线的颜色等，与面积颜色搭配
          itemStyle: {
            color: 'rgb(75, 140, 245)',
          },
        },
      ],
    };

    // 使用配置项显示图表
    myChart.setOption(option);
  }
};

// 组件卸载时销毁 ECharts 实例，避免内存泄漏
onUnmounted(() => {
  if (myChart) {
    myChart.dispose();
    myChart = null;
  }
});
</script>
<style scoped lang="scss">
.line-chart{

}
</style>
